<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>OAuth2.1 守卫 登录</title>
    <style>
        body {
            background-color: #f8f9fa;
            /* 取消边距 */
            margin: 0;
            /* 最大屏幕 */
            height: 100vh;
            width: 100vw;
            /* 定义盒子 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .all_form {
            width: 20%;
            height: 50%;
        }

        .container {
            padding: 15px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .form-signing .form-control {
            position: relative;
            height: auto;
            box-sizing: border-box;
            padding: 10px;
            font-size: 16px;
            margin-bottom: 10px;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .form-signing button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .form-signing button:hover {
            background-color: #45a049;
        }

        .form-signing input:focus {
            outline: none;
        }

        .form-signing input:required:invalid {
            border-color: #ccc;
        }

        .form-signing input:required:invalid:focus {
            border-color: red;
        }

        .button-container {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        .button-container button:first-child {
            margin-right: 25px;
        }

        .upload-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .upload-input {
            flex: 1;
        }

        .upload-button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .upload-button:hover {
            background-color: #45a049;
        }

        .input-hint {
            font-size: 12px;
            color: #999;
        }

        /* 在小屏幕上应用不同的样式 */
        @media screen and (max-width: 768px) {
            .all_form {
                width: 50%;
                height: 70%;
            }
        }

        /* 在更小的屏幕上应用不同的样式 */
        @media screen and (max-width: 480px) {
            .all_form {
                width: 80%;
                height: 90%;
            }
        }
    </style>
</head>
<body>
<div class="all_form">
    <div class="container">
        <div style="text-align: center;">
            <h2>Guard OAuth</h2>
            <p style="color: red">
                {{.error}}
            </p>
            <p style="color: #66b259">
                {{.msg}}
            </p>
        </div>
        <div class="login">
            <form class="form-signing" id="loginForm" method="post" action="/login">
                <p>
                    <label for="username"></label><input type="text" id="username" name="username" class="form-control"
                                                         placeholder="用户名" required autofocus>
                </p>
                <p>
                    <label for="password"></label><input type="password" id="password" name="password"
                                                         class="form-control" placeholder="密码"
                                                         required>
                </p>
                <div class="button-container">
                    <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
                    <button class="btn btn-lg btn-primary btn-block" onclick="toggleForm()">切换到注册</button>
                </div>
            </form>

            <div class="form-signing" id="registerForm" style="display: none;">
                <p>
                    <label for="register_username"></label><input type="text" id="register_username" name="username"
                                                                  class="form-control"
                                                                  placeholder="注册用户名" required autofocus/>
                    <span class="input-hint">用户名，只能是数字，字母，最短5，最长20。</span>
                </p>
                <p>
                    <label for="register_password"></label><input type="password" id="register_password" name="password"
                                                                  class="form-control" placeholder="密码" required>
                    <span class="input-hint">密码，只能是数字，字母，符合，必须包含字母，数字，符号至少一个，最短8，最长20。</span>
                </p>
                <p>
                    <label for="register_ok_password"></label><input type="password" id="register_ok_password"
                                                                     class="form-control" placeholder="确认新密码"
                                                                     required>
                </p>
                <p>
                    <label for="register_nickname"></label><input type="text" id="register_nickname" name="nickname"
                                                                  class="form-control"
                                                                  placeholder="昵称" required>
                    <span class="input-hint">昵称，只包含中文、字母和数字，最长20。</span>
                </p>
                <div class="upload-container">
                    <input type="file" id="avatar" class="upload-input" accept="image/*" required>
                    <button class="upload-button" type="button">选择头像</button>
                    <!-- base64图片表单提交，改为fetch了，不需要放表单里了 -->
                </div>

                <!-- 在这里显示头像 -->
                <div id="previewContainer"></div>
                <span class="input-hint">头像最大不能大于100KB</span>

                <div class="button-container">
                    <button class="btn btn-lg btn-primary" id="submit-button">注册</button>
                    <button class="btn btn-lg btn-primary" onclick="toggleForm()">切换到登录</button>
                </div>
            </div>
        </div>
        <div>
            <h6><a href="/admin/web/view">我需要跳转到后台</a></h6>
        </div>
        <div>
            <h6>不用怀疑，ChatGPT写的，太多的前端验证就不写了，全写在后端了</h6>
        </div>
    </div>
</div>
<script>
    // 切换注册与登录
    function toggleForm() {
        const loginForm = document.getElementById("loginForm");
        const registerForm = document.getElementById("registerForm");

        if (loginForm.style.display === "none") {
            loginForm.style.display = "block";
            registerForm.style.display = "none";
        } else {
            loginForm.style.display = "none";
            registerForm.style.display = "block";
        }
    }

    /**
     * 上传头像
     * @type {HTMLElement}
     */
    const fileInput = document.querySelector('#avatar');
    const uploadButton = document.querySelector('.upload-button');
    const previewContainer = document.querySelector('#previewContainer');

    let base64String = null; // 存储Base64编码的字符串

    // 添加一个上传按钮的click事件
    uploadButton.addEventListener('click', handleUploadClick);

    // 添加一个file按钮的监听器，如果发送变化
    fileInput.addEventListener('change', handleFileChange);

    function handleUploadClick() {
        fileInput.click();
    }

    function handleFileChange() {
        const file = fileInput.files[0];
        const maxSizeInBytes = 100 * 1024; // 100KB

        // 清除previewContainer中的内容
        previewContainer.innerHTML = "";

        if (file && file.size <= maxSizeInBytes) {
            // 将选择的文件名显示在按钮上
            uploadButton.textContent = file.name;

            // 显示头像
            const previewImage = document.createElement('img');
            previewImage.src = URL.createObjectURL(file);
            // 固定一个宽高
            previewImage.height = 200
            previewImage.width = 200
            previewContainer.appendChild(previewImage);

            // 读取图片
            const reader = new FileReader();
            reader.onload = handleReaderLoad;
            reader.readAsDataURL(file);
        } else {
            // 文件大小超过限制的处理逻辑
            showCustomAlert('文件大小超过限制，请选择小于100KB的文件。');
            fileInput.value = ''; // 清空文件输入框的值
        }

        if (fileInput.files.length > 1) {
            showCustomAlert('只能选择一个头像文件，请重新选择。');
            fileInput.value = ''; // 清空文件输入框的值
        }
    }

    function handleReaderLoad(event) {
        base64String = event.target.result.split(",")[1]; // 获取Base64编码的字符串
        URL.revokeObjectURL(event.target.result); // 释放URL对象
    }

    // 提交按钮的点击事件处理程序
    document.getElementById('submit-button').addEventListener('click', () => {
        // 验证是否填写
        let usernameInput = document.getElementById("register_username").value;
        let passwordInput = document.getElementById("register_password").value;
        let nicknameInput = document.getElementById("register_nickname").value;

        if (usernameInput === "" || passwordInput === "" || nicknameInput === "") {
            showCustomAlert("请填写所有必填字段！");
            return false;
        }

        // 验证密码是否输入正确
        let ok_password = document.getElementById("register_ok_password").value;
        if (passwordInput !== ok_password) {
            showCustomAlert("密码与确认密码不一致！");
            return false;
        }

        if (base64String) {
            // 提交
            const userInfo = {
                username: usernameInput,
                password: passwordInput,
                nickname: nicknameInput,
                picture: base64String
            }
            fetch("register", {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(userInfo)
            })
                .then(response => response.json())
                .then(data => {
                    showCustomAlert(data.msg)
                })
        } else {
            showCustomAlert('请先选择头像文件。');
        }
    });
</script>
</body>
</html>
<!-- 美化alert，不用第三方 -->
<style>
    .custom-alert {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 10px 20px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        z-index: 9999;
    }

    .custom-alert-message {
        display: block;
        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
    }
</style>
<div id="customAlert" class="custom-alert">
    <span id="customAlertMessage" class="custom-alert-message"></span>
</div>
<script>
    function showCustomAlert(message) {
        // 创建提示框元素
        const alertContainer = document.getElementById("customAlert");
        const alertMessage = document.getElementById("customAlertMessage");

        // 设置提示信息内容
        alertMessage.innerHTML = message;

        // 显示提示框
        alertContainer.style.display = "block";

        // 3秒后隐藏提示框
        setTimeout(function () {
            alertContainer.style.display = "none";
        }, 2000);
    }
</script>